<template>
  <div class="app-container">
    <el-row :gutter="30">
      <el-col :span="8">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>热点视频</span>
          </div>
          <el-table :data="videoList" :show-header="false" @row-click="handlePreview"  style="cursor: pointer" height="240">
            <el-table-column  prop="name"  show-overflow-tooltip/>
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>热点音频</span>
          </div>
          <el-table :data="voiceList" :show-header="false" @row-click="handlePreview"  style="cursor: pointer" height="240">
            <el-table-column  prop="name"  show-overflow-tooltip/>
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>热点图片</span>
          </div>
          <el-table :data="picList" :show-header="false" @row-click="handlePreview"  style="cursor: pointer" height="240">
            <el-table-column  prop="name"  show-overflow-tooltip/>
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="8" style="margin-top: 30px">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>热点文档</span>
          </div>
          <el-table :data="docList" :show-header="false" @row-click="handlePreview"  style="cursor: pointer" height="240">
            <el-table-column  prop="name"  show-overflow-tooltip/>
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="8" style="margin-top: 30px">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>其他</span>
          </div>
          <el-table :data="otherList" :show-header="false" @row-click="handlePreview"  style="cursor: pointer" height="240">
            <el-table-column  prop="name"  show-overflow-tooltip/>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
    <el-dialog title="文件预览" :visible.sync="openPreview" v-if="openPreview" width="1240px" append-to-body>
      <file-preview :src="fileUrl"></file-preview>
    </el-dialog>
  </div>
</template>

<script>
import FilePreview from "@/components/FilePreview/index"
import {
  listHotFileInfo,
  setFileInfoView,
} from "@/api/fileInfo/fileInfo";
import Treeselect from "@riophae/vue-treeselect";
export default {
  name: "Index",
  components:{ FilePreview},
  data() {
    return {
      openPreview:false,
      fileUrl:"",
      videoList:[],
      voiceList:[],
      picList:[],
      docList:[],
      otherList:[],
      video:["mp4","avi","mkv","mov","wmv","flv","webm","3gp","mpeg","ts","rmvb"],
      voice:["mp3","wav","acc","flac","alac","ogg","wma","aiff","ape","m4a"],
      pic:["jpeg","jpg","png","gif","bmp","tiff","tif","webp","svg"],
      doc:["doc","docx","pdf","ppt","pptx","xls","xlsx","txt"],
    };
  },
  created() {
    listHotFileInfo({pageNum:1,pageSize:5,types:this.video,notTypes:[]}).then(response => {
      this.videoList = response.data;
    })
    listHotFileInfo({pageNum:1,pageSize:5,types:this.voice,notTypes:[]}).then(response => {
      this.voiceList = response.data;
    })
    listHotFileInfo({pageNum:1,pageSize:5,types:this.pic,notTypes:[]}).then(response => {
      this.picList = response.data;
    })
    listHotFileInfo({pageNum:1,pageSize:5,types:this.doc,notTypes:[]}).then(response => {
      this.docList = response.data;
    })
    listHotFileInfo({pageNum:1,pageSize:5,types:this.types,notTypes:[...this.video,...this.voice,...this.pic,...this.doc,"folder"]}).then(response => {
      this.otherList = response.data;
    })
  },
  methods: {
    handlePreview(row){
      let type = row.type;
      setFileInfoView({id:row.id})
      if (type == "pdf"){
        window.open(process.env.VUE_APP_BASE_API+row.url)
      }else {
        this.openPreview = true;
        this.fileUrl = process.env.VUE_APP_BASE_API+row.url;
      }
    },
  },
};
</script>
<style>
.box-card .el-table{
  &&:before{
    height: 0px !important;
  }
}
</style>
<style scoped lang="scss">
  .home{
    background-image: url("../assets/images/Bitmap.png");
    background-repeat: no-repeat;
    background-size: 35%;
    background-position: 80% center;
    height: calc(100vh - 84px);
    position: relative;
    .welcome{
      opacity: 0.05;
      font-size: 70px;
      position: absolute;
      top: 36%;
      margin: 0;
      left: 70px;
    }
    .title{
      position: absolute;
      top: 40%;
      left: 70px;
      h1{font-size: 40px;
        line-height: 52px;
        font-weight: bold;
        margin: 0;
        margin-bottom: 10px;
        color: #101010;}
      p{
        font-size: 26px;
        color: #606060;
        line-height: 36px;
        margin: 0;
        letter-spacing: 0.93px;
      }

    }
  }
</style>

